<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <!--1. 导入模板引擎 -->
    <script src="lib/template-web.js"></script>
    <script src="lib/jquery.js"></script>
  </head>
  <body>
    <div id="container"></div>

    <!-- 3 定义模板 将HTML结构写到script中 -->

    <script type="text/html" id="tpl-user">
      <!-- 变量输出 -->
      <h1>{{name}}</h1>
      <!-- 原文输出  -->
      {{@ test}}
      <!-- 条件渲染 -->
      {{if flag === 0}}
      <div>flag的值是0</div>
      {{/if}}
      <!-- 循环输出 -->
      {{each hobby}} 我的第{{$index}}个爱好是{{$value}}{{/each}}
      <!-- 过滤器 -->
      {{regTime | dateFormat}}
    </script>

    <script>
      // 定义处理时间的过滤器
      template.defaults.imports.dateFormat = function (data) {
        console.log(data);
        var y = data.getFullYear();
        var m = data.getMonth() + 1;
        var d = data.getDate();

        return y + "-" + m + "-" + d;
      };

      // 2 需要渲染的数据
      let data = {
        name: "zz",
        test: "<h3>666</h3>", // 需要原文输出
        flag: 0, // 通过if条件输出
        hobby: ["吃饭", "睡觉"], // 循环输出 索引用$index 一般不用
        regTime: new Date(),
      };
      // 4 调用template函数
      let htmlStr = template("tpl-user", data);
      // 5 渲染html结构
      $("#container").html(htmlStr);
    </script>
  </body>
</html>
